<template>
  <div>
    <div>父组件</div>
    <p></p>
    <p>所有的 props 都遵循着单向绑定原则，props 因父组件的更新而变化，</p>
    <p>自然地将新的状态向下流往子组件，而不会逆向传递</p>
    <p></p>
    <a-button type="primary" @click="count++">点我</a-button>
    <p></p>
    我是：{{ count }}
    <a-divider></a-divider>
    <!-- 组件上的值推荐使用 HTML的书写方式：使用横线分割单词  greeting-message -->
    <!-- 仅写上 prop 但不传值，会隐式转换为 `true`，如 is-published -->
    <ChildVue
      :count="count"
      :greeting-message="greetingMessage"
      is-published
    ></ChildVue>
    <a-divider></a-divider>
    <!-- 数组和对象都需要使用V-bind方式，因为传入的是 javascript 表达式 -->
    <ChildVue
      :count="count"
      :comment-ids="[234, 266, 273]"
      :author="{
        name: 'Veronica',
        company: 'Veridian Dynamics',
      }"
    ></ChildVue>
  </div>
</template>

<script>
import ChildVue from "./ChildVue.vue";
export default {
  components: {
    ChildVue,
  },
  data() {
    return {
      count: 0,
      greetingMessage: "你好吗？",
    };
  },
};
</script>

<style></style>
